<template>
  <div id="app">
    <div class="bg">
      <div class="box">
        <el-image style="width: 131px; height: 101px" :src="url"></el-image>

        <el-form
          :rules="rules"
          ref="ruleForm"
          :model="form"
          @keyup.enter.native="log"
        >
          <el-form-item prop="user">
            <el-input
              prefix-icon="el-icon-user"
              v-model="form.account"
              placeholder="请输入账号"
            ></el-input
          ></el-form-item>

          <el-form-item prop="password">
            <el-input
              prefix-icon="el-icon-lock"
              placeholder="请输入密码"
              v-model="form.password"
              show-password
            >
            </el-input>
          </el-form-item>
          <el-button type="primary" @click="log">登录</el-button>
          <el-button class="to" @click="resetForm()">重置</el-button>
          <el-form-item> </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex';

export default {
  data() {
    return {
      url: "https://cartest.zjcjj.net/logo.png",
      //   user: "",
      //   password: "",
      form: {},
      rules: {
        account: [
          { required: true, message: "请输入账号", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          {
            min: 3,
            max: 12,
            message: "长度在 3 到 12 个字符",
            trigger: "blur",
          },
        ],
      },
    };
  },
  methods: {
    ...mapMutations(['initcurrent']),
    log() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          this.$http.post("/sysUser/login", this.form).then((res) => {
            console.log(res);
            if (res.data.code === 1) {
              this.$message({
                message: res.data.message,
                type: "success",
              });
              console.log(res);
              this.initcurrent(res.data.object)
              localStorage.setItem('current',JSON.stringify(res.data.object))
              this.$router.push("/home");
            } else {
              this.$message.error(res.data.message);
              console.log(res);            }
          });
        }
      });
    },
    resetForm(ruleForm) {
      this.$refs.ruleForm.resetFields();
    },
  },
};
</script>

<style lang="scss" scoped>
.bg {
  height: 100%;
  width: 100%;
  background: url(../assets/bg.jpg);
  .box {
    width: 270px;
    height: 285px;
    padding: 15px 15px 0;
    background-color: rgba(255, 255, 255, 0.2);
    border-radius: 8px;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
  }
}
.el-form {
  margin-top: 15px;
  .el-form-item {
    margin-bottom: 20px;
  }
}
.to {
  background-color: transparent;
  border: none;
  color: white;
}
</style>